<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<head>
  <title>养殖场管理中心</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="lib/elementui/theme-chalk/index.css" type="text/css">
  <style>
    body {
      margin: 0px;
    }

    /* 所有 */
    #app {
      width: 100%;
      height: 100%;
    }

    /* 头 */
    .header {
      color: rgba(255, 255, 255, 0.75);
      line-height: 60px;
      text-align: center;
    }

    .header div {
      display: inline;
    }

    .title {}

    .author {
      float: right;
    }

    .author-img {
      width: 20px;
      height: 20px;
    }

    .author-github {
      cursor: pointer;
    }

    /* 内容区 */
    .container {
      min-height: 600px;
      width: 100%;
      height: 100%
    }

    /* 左边内容区 */
    .left {
      color: #4b595f;
      width: 100px;
    }

    .left .totalUl {
      height: 93%;
    }

    /* 右边内容区 */
    .right {
      min-width: 200px;
    }

    tbody {
      font-size: 15px;
      color: #4b595f;
    }

    .logoicon {
      width: 70px;
      height: 50px;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-container class="container">
      <el-header class="header">
        <el-menu background-color="#ffffff" text-color="#000000" active-text-color="#ffaa00"
          :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1" @click="open(systeminfo)"><img src="./static/imgs/logo-icon.png" class="logoicon"
              alt=""></el-menu-item>
          <el-menu-item index="2" @click="open(systeminfo)">系统信息</el-menu-item>
          <el-menu-item index="3" @click="open(usercenterurl)"> <span>个人信息</span> </el-menu-item>
          <el-menu-item index="4" @click="logout"> <i class="el-icon-switch-button"></i></el-menu-item>
        </el-menu>
      </el-header>

      <el-container>
        <el-aside class="left">
          <el-menu background-color="#ffffff" text-color="#000000" active-text-color="#ffaa00"
            :default-active="activeIndex" class="totalUl">
            <!-- <el-menu-item v-if="userbase.groupid == 5" index="1" @click="open(aboutMeUrl)"><i
                class="el-icon-setting"></i>员工管理</el-menu-item> -->
            <el-submenu :index="firstMenu.id" v-for="firstMenu in menus" :key="firstMenu.id">
              <template slot="title"><i :class="firstMenu.iconClass"></i>{{ firstMenu.name }}</template>
              <el-menu-item-group v-for="secondMenu in firstMenu.children" :key="secondMenu.id">
                <template slot="title">{{ secondMenu.name }}</template>
                <el-menu-item v-for="thirdMenu in secondMenu.children" :index="thirdMenu.id" :key="thirdMenu.id"
                  @click="open(thirdMenu.url)">{{ thirdMenu.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
        </el-aside>

        <el-main class="right">
          <iframe style="width:100%; height:100%; border: 0;" :src="iframeUrl"></iframe>
        </el-main>
      </el-container>
      <el-footer>
        新星养殖管理中心 @ 张新 版权所有
      </el-footer>
    </el-container>
  </div>
  <!-- 引入组件库 -->
  <script type="text/javascript" src="lib/vue.js"></script>
  <script type="text/javascript" src="lib/elementui/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        activeIndex: "1",
        usercenterurl: "userinfo.jsp",
        aboutMeUrl: "usermanager.jsp",
        systeminfo: "systeminfo.jsp",
        userbase: undefined,
        iframeUrl: "systeminfo.jsp",
        menus: [
          {
            name: "营业统计",
            id: "date",
            iconClass: "el-icon-time",
            children: [
              {
                name: "营业统计",
                id: "DatePicker",
                children: [
                  { name: "营业统计", id: "DatePicker-demo1", url: "statics.jsp" },
                ]
              }
            ]
          },
          {
            name: "养殖管理",
            id: "form",
            iconClass: "el-icon-edit-outline",
            children: [
              {
                name: "养殖管理",
                id: "input",
                children: [
                  { name: "养殖管理", id: "input-demo1", url: "pigmanager.jsp" }
                ]
              },

            ]
          },
          {
            name: "饲料管理",
            id: "Table",
            iconClass: "el-icon-tickets",
            children: [
              {
                name: "饲料管理",
                id: "ZDYLMB",
                children: [
                  { name: "饲料管理", id: "zdylmb-demo1", url: "feedmanager.jsp" },

                ]
              },

            ]
          },
          {
            name: "销售管理",
            id: "Dialog",
            iconClass: "el-icon-message",
            children: [
              {
                name: "销售管理",
                id: "notification",
                children: [
                  { name: "销售管理", id: "noti-demo1", url: "sellmanager.jsp" }
                ]
              }
            ]
          },
          {
            name: "疫苗情况",
            id: "Tab",
            iconClass: "el-icon-suitcase",
            children: [
              {
                name: "Tab",
                id: "Tab1",
                children: [
                  { name: "疫苗情况", id: "tab-demo1", url: "ipvmanager.jsp" }
                ]
              }
            ]
          },
          {
            name: "员工管理",
            id: "usermanager",
            iconClass: "el-icon-suitcase",
            children: [
              {
                name: "员工管理",
                id: "usermanager",
                children: [
                  { name: "员工管理", id: "tab-usermanager", url: "usermanager.jsp" }
                ]
              }
            ]
          },
        ]
      },
      mounted() {
        this.getUserBase();
      },
      methods: {
        getUserBase() {
          var jsonparm = localStorage.getItem("userbase");
          console.log(jsonparm)
          if (jsonparm != null) {
            this.userbase = JSON.parse(jsonparm);
            console.log(this.userbase)
          }
          if (this.userbase.groupid == 4) {
            this.menus = [this.menus[3]]
          } else if (this.userbase.groupid == 3) {
            this.menus = [this.menus[4]]
          } else if (this.userbase.groupid == 2) {
            this.menus = [this.menus[2]]
          } else if (this.userbase.groupid == 1) {
            this.menus = [this.menus[1]]
          }
        },
        logout() {
          axios.post("/logout").then(res => {
            console.log(res);
            if (res.data.result == "1001") {
              window.location.href = "/"
            }
          })
        },
        open(url) {
          this.iframeUrl = url;
        },
        openGitHub() {
          window.open("https://github.com/yuleGH", "_blank");
        },
        handleSelect() {

        }
      }
    });
  </script>
</body>

</html>